<template>
  <div class="news-detail-container">
    <el-card class="detail-card" v-loading="loading">
      <template v-if="!loading && newsData">
        <!-- 返回按钮 -->
        <el-button 
          type="primary" 
          icon="el-icon-arrow-left" 
          @click="goBack"
          class="back-button"
        >
          返回首页
        </el-button>

        <!-- 新闻标题 -->
        <h1 class="news-title">{{ newsData.title }}</h1>

        <!-- 新闻元信息 -->
        <div class="news-meta">
          <el-tag type="info" class="author-tag">作者: {{ newsData.author }}</el-tag>
          <span class="publish-time">{{ formatDate(newsData.created_at) }}</span>
          <span v-if="newsData.updated_at && newsData.updated_at !== newsData.created_at" class="update-time">
            (更新于: {{ formatDate(newsData.updated_at) }})
          </span>
        </div>

        <!-- 新闻内容 -->
        <div class="news-content">
          {{ newsData.content }}
        </div>
      </template>

      <!-- 加载状态 -->
      <template v-else-if="loading">
        <div class="loading-content">
          <el-skeleton :rows="8" animated />
        </div>
      </template>

      <!-- 错误状态 -->
      <template v-else-if="error">
        <div class="error-content">
          <el-empty description="新闻加载失败" />
          <el-button type="primary" @click="fetchNewsDetail">重试</el-button>
          <el-button @click="goBack">返回首页</el-button>
        </div>
      </template>

      <!-- 未找到 -->
      <template v-else>
        <div class="not-found">
          <el-empty description="未找到该新闻" />
          <el-button type="primary" @click="goBack">返回首页</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getNewsDetail } from '../api/newsAPI'

const router = useRouter()
const route = useRoute()
const newsData = ref(null)
const loading = ref(true)
const error = ref(false)

    // 获取新闻详情数据
    const fetchNewsDetail = async () => {
     
      
      const newsId = route.params.id
      if (!newsId) {
        loading.value = false
        error.value = true
        return
      }

      loading.value = true
      error.value = false

      try {
        const response = await getNewsDetail(newsId)
        newsData.value = response.data
        console.log('新闻详情:', newsData.value)
      } catch (err) {
        console.error('获取新闻详情失败:', err)
        error.value = true
      } finally {
        loading.value = false
      }
    }

    // 返回首页
    const goBack = () => {
      router.push('/')
    }

    // 格式化日期 - 添加错误处理和更健壮的日期解析
    const formatDate = (dateString) => {
      // 检查输入是否有效
      if (!dateString || dateString === 'null' || dateString === 'undefined') {
        return '未知时间'
      }
      
      try {
        // 尝试解析日期，处理不同格式的日期字符串
        const date = new Date(dateString)
        
        // 检查是否是有效日期
        if (isNaN(date.getTime())) {
          return '无效时间'
        }
        
        // 使用更可靠的格式化方式
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        
        return `${year}-${month}-${day} ${hours}:${minutes}`
      } catch (error) {
        console.error('日期格式化错误:', error)
        return '时间格式错误'
      }
    }

    // 组件挂载时获取数据
    onMounted(() => {
      fetchNewsDetail()
    })

    // 暴露给模板使用的变量和函数会自动导出
</script>

<style scoped>
.news-detail-container {
  max-width: 800px;
  margin: 0 auto;
}

.detail-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.back-button {
  margin-bottom: 20px;
}

.news-title {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e8e8e8;
  flex-wrap: wrap;
}

.author-tag {
  font-size: 0.9rem;
}

.publish-time,
.update-time {
  color: #909399;
  font-size: 0.9rem;
}

.news-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #303133;
  white-space: pre-wrap;
}

.loading-content,
.error-content,
.not-found {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.error-content .el-button,
.not-found .el-button {
  margin-top: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news-title {
    font-size: 1.5rem;
  }

  .news-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .news-content {
    font-size: 1rem;
  }
}
</style>